<template>
    <div class="content">
        <el-row>
            <el-col :span="12">
                <div class="table-title">
                    <span>PDF导出</span>
                    <el-tooltip placement="bottom-start" effect="light">
                        <template #content>
                            <div class="tooltip">
                                <h3>PDF导出</h3>
                                <span>npm install --save html2canvas  // 页面转图片</span>
                                <span>npm install jspdf  // 图片转pdf</span>
                            </div>
                        </template>
                        <el-icon><Warning /></el-icon>
                    </el-tooltip>
                </div>
            </el-col>
            <el-col :span="12">
                <div style="line-height: 60px">
                    <el-button type="primary" @click="exportTable">导出</el-button>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div class="pdf-div" id="pdfHtmlRef">
                    <div class="pdf-title">PDF导出内容</div>
                    <div class="pdf-content">
                        <div class="pdf-content-title">1、导出文件描述</div>
                        <div class="ti2">
                            <span>
                                阿喀琉斯的阿达啊的空间阿达大大大宽度爱哭的 阿贾克斯的安居客的阿里山扩大阿里大大家看大卡拉省开发阿喀琉斯阿喀琉斯大力开发是老款的分解夫卡弗
                                狼快警方日方雷克萨发琐啦付款了时间发送旅客发卢卡斯的骄傲拉客的奥克兰大阿第克奥兰多阿飞卡阿里开发埃里克森发i了狼快考虑  看绿卡舒服啦flak发了
                                疯奥利弗看奥利弗i罚款舒服啦法兰克法兰克福奥利弗阿里了狼快绿卡是否克拉夫啊奥利弗就奥利弗啊发奥利弗阿拉弗拉
                            </span>
                        </div>
                    </div>
                    <div class="pdf-content">
                        <div class="pdf-content-title">2、导出表格</div>
                        <div style="margin: 20px">
                            <h4 class="ti2">1、css表格</h4>
                            <div class="table-content" style="margin-left: 2em">
                                <div class="table-item" v-for="(item,i) in cssTableData" :key="i" :style="{borderWidth:i===0?'2px 2px 2px 2px':'0px 2px 2px 2px'}">
                                    <div class="table-item-name">
                                        <span>{{item.name}}</span>
                                    </div>
                                    <div class="table-item-value">
                                        <span style="margin-left: 20px">{{item.value}}</span>
                                    </div>
                                </div>
                            </div>
                            <h4 class="ti2">2、element封装表格</h4>
                            <div style="margin-left: 2em">
                                <baseTable
                                        ref="baseTableRef"
                                        :tableData="tableData"
                                        :tableCol="tableCol"
                                        :showTable="true"
                                        :showPage="false"
                                        :tableHeight="tableHeight"
                                        :page="page">
                                </baseTable>
                            </div>
                        </div>
                    </div>
                    <div class="pdf-content">
                        <div class="pdf-content-title">3、导出图表</div>
                        <div class="chart-div" ref="barChartRef"></div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
    import {ref,inject,onMounted} from 'vue'
    import {htmlPdf} from './pdfUtils'
    import baseTable from '../../../components/baseTable/index.vue'



    const cssTableData = ref([
        {name:'姓名',value:'张三'},
        {name:'性别',value:'男'},
        {name:'手机号',value:'18888888888'},
    ]);
    const tableData = ref([
        {name:'张三',gender:'男',phone:'18888888888',state:'激活',creationTime:'2025-01-01',content:'卡顿蛤科的阿达空间'},
        {name:'张三',gender:'男',phone:'18888888888',state:'激活',creationTime:'2025-01-01',content:'卡顿蛤科的阿达空间'},
        {name:'张三',gender:'男',phone:'18888888888',state:'激活',creationTime:'2025-01-01',content:'卡顿蛤科的阿达空间'},
        {name:'张三',gender:'男',phone:'18888888888',state:'激活',creationTime:'2025-01-01',content:'卡顿蛤科的阿达空间'},
        {name:'张三',gender:'男',phone:'18888888888',state:'激活',creationTime:'2025-01-01',content:'卡顿蛤科的阿达空间'},
        {name:'张三',gender:'男',phone:'18888888888',state:'激活',creationTime:'2025-01-01',content:'卡顿蛤科的阿达空间'},
        {name:'张三',gender:'男',phone:'18888888888',state:'激活',creationTime:'2025-01-01',content:'卡顿蛤科的阿达空间'},
        {name:'张三',gender:'男',phone:'18888888888',state:'激活',creationTime:'2025-01-01',content:'卡顿蛤科的阿达空间'},
        {name:'张三',gender:'男',phone:'18888888888',state:'激活',creationTime:'2025-01-01',content:'卡顿蛤科的阿达空间'},
        {name:'张三',gender:'男',phone:'18888888888',state:'激活',creationTime:'2025-01-01',content:'卡顿蛤科的阿达空间'},
        {name:'张三',gender:'男',phone:'18888888888',state:'激活',creationTime:'2025-01-01',content:'卡顿蛤科的阿达空间'},
        {name:'张三',gender:'男',phone:'18888888888',state:'激活',creationTime:'2025-01-01',content:'卡顿蛤科的阿达空间'},
        {name:'张三',gender:'男',phone:'18888888888',state:'激活',creationTime:'2025-01-01',content:'卡顿蛤科的阿达空间'},
        {name:'张三',gender:'男',phone:'18888888888',state:'激活',creationTime:'2025-01-01',content:'卡顿蛤科的阿达空间'},
        {name:'张三',gender:'男',phone:'18888888888',state:'激活',creationTime:'2025-01-01',content:'卡顿蛤科的阿达空间'},
        {name:'张三',gender:'男',phone:'18888888888',state:'激活',creationTime:'2025-01-01',content:'卡顿蛤科的阿达空间'},
        {name:'张三',gender:'男',phone:'18888888888',state:'激活',creationTime:'2025-01-01',content:'卡顿蛤科的阿达空间'},
        {name:'张三',gender:'男',phone:'18888888888',state:'激活',creationTime:'2025-01-01',content:'卡顿蛤科的阿达空间'},
        {name:'张三',gender:'男',phone:'18888888888',state:'激活',creationTime:'2025-01-01',content:'卡顿蛤科的阿达空间'},
        {name:'张三',gender:'男',phone:'18888888888',state:'激活',creationTime:'2025-01-01',content:'卡顿蛤科的阿达空间'},
        {name:'张三',gender:'男',phone:'18888888888',state:'激活',creationTime:'2025-01-01',content:'卡顿蛤科的阿达空间'},
        {name:'张三',gender:'男',phone:'18888888888',state:'激活',creationTime:'2025-01-01',content:'卡顿蛤科的阿达空间'},
        {name:'张三',gender:'男',phone:'18888888888',state:'激活',creationTime:'2025-01-01',content:'卡顿蛤科的阿达空间'},
        {name:'张三',gender:'男',phone:'18888888888',state:'激活',creationTime:'2025-01-01',content:'卡顿蛤科的阿达空间'},
        {name:'张三',gender:'男',phone:'18888888888',state:'激活',creationTime:'2025-01-01',content:'卡顿蛤科的阿达空间'},
        {name:'张三',gender:'男',phone:'18888888888',state:'激活',creationTime:'2025-01-01',content:'卡顿蛤科的阿达空间'},
        {name:'张三',gender:'男',phone:'18888888888',state:'激活',creationTime:'2025-01-01',content:'卡顿蛤科的阿达空间'},
        {name:'张三',gender:'男',phone:'18888888888',state:'激活',creationTime:'2025-01-01',content:'卡顿蛤科的阿达空间'},
        {name:'张三',gender:'男',phone:'18888888888',state:'激活',creationTime:'2025-01-01',content:'卡顿蛤科的阿达空间'},
    ]);
    const tableCol = [
        {value: '', label: '序号', Vif: 'true', type: '序号'},
        {value: 'name', label: '名称', Vif: 'true'},
        {value: 'gender', label: '性别', Vif: 'true'},
        {value: 'phone', label: '手机号', Vif: 'true'},
        {value: 'state', label: '状态', Vif: 'true',},
        {value: 'creationTime', label: '创建时间', Vif: 'true'},
        {value: 'content', label: '内容', Vif: 'true'},
    ];
    const tableHeight = tableData.length * 10 +'px';
    const page = {
        // 当前页
        currentPage: 1,
        pageSize: 20,
        // 分页大于3页是折叠分页
        pagerCount: 7,
        // 总条数
        total: 0,
        // 有多少页
        pageCount: 0,
    };


    // 通过 inject 接收Echarts
    const Echarts = inject('$echarts');
    const barChartRef = ref();


    const getData=()=>{
        // echarts初始化
        const myChart = Echarts.init(barChartRef.value);
        const option = {
            // 1、图表 当鼠标悬浮的时候展示文字选项
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                valueFormatter: value => value ? (value.toFixed(2) + '%') : 0 // 鼠标悬浮展示文字格式化
            },
            // 2、图表 周围留白空间
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            // 3、图表 X轴 选项
            xAxis: [
                {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            // 4、图表 y轴 选项，数值可交换：即柱形图横竖展示
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [{
                name: '已完成',
                type: 'bar',
                barWidth: '60%',
                // 此轴单独定义鼠标悬浮文字展示
                tooltip: {
                    trigger: 'axis',
                    valueFormatter: value => ''
                },
                // 柱子样式
                itemStyle: {
//                    color: 'red',
                },
                // 描述文字
                label: {
                    show: true,
                    formatter: (params) => params[params.dataIndex]
                },
                // 描述文字样式
                textStyle: {
                    color: '#000'
                },
                // 文字位置
                position: 'right',
                data: [10, 52, 200, 334, 390, 330, 220],
            }]
        };
        option && myChart.setOption(option);
        // 根据页面大小自动响应图表大小
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    };


    const exportTable = ()=>{
        var fileName= 'PDF导出';
        const fileList = document.getElementsByClassName('pdfHtmlRef');
        htmlPdf(fileName, document.querySelector('#pdfHtmlRef'), fileList);
    }

    onMounted(() => {
        getData();
    })

</script>

<style scoped>
    .content{
        width: 100%;
        height: 100%;
    }
    .pdf-div{
        width: 60%;
        height: 98%;
        overflow: auto;
        margin: 20px;
        font-size: 20px;
        display: inline-table;
    }
    .pdf-title{
        font-size: 40px;
        font-weight: bold;
        margin: 30px;
    }
    .pdf-content{
        text-align: left;
        margin-top: 10px;
    }
    .pdf-content-title{
        font-size: 30px;
        font-weight: bold;
        margin: 20px;
    }
    .table-content{
        width: 100%;
    }
    .table-item{
        width: 500px;
        height: 40px;
        text-align: left;
        border: 2px solid #9a9da8;
    }
    .table-item-name{
        width: 20%;
        height: 40px;
        float: left;
        margin-left: 20px;
        display: flex;
        align-items: center;
    }
    .table-item-value{
        width: 70%;
        height: 40px;
        float: left;
        border-left: 2px solid #9a9da8;
        display: flex;
        align-items: center;
    }
    .chart-div{
        width: 100%;
        height: 300px;
    }
</style>